<template>
  <view>
    <charttips name="车辆占用率" :num="num" />
    <view v-for="(item, index) in dataAmount" :key="item.name" @click="toList(item, index)">
      <text class="ratetit">{{ item.name }}：{{ item.rate }}% - 共 {{ item.count }} 辆</text>
      <view class="group">
        <view class="rate-step" :style="{ background: color[index], width: Number(item.rate) + '%' }"></view>
      </view>
    </view>
  </view>

  <ve-popup v-model="toggleDetailStatus" class="store-popup" @close="toggleDetailStatus = false" mode="bottom">
    <view class="popup-tlt">
      <view class="flex">
        <view class="site-label flex">
          <view style="width: 60%">
            <ve-tooltip placement="bottom">
              <template #content> {{ tooltipData.siteName || '全部门店' }} </template>
              <text class="text-over">{{ tooltipData.siteName || '全部门店' }}</text>
            </ve-tooltip>
          </view>
          <ve-icon name="delete-data" size="18" @click="toggleDetailStatus = false" />
        </view>
      </view>
      <text :class="{ 'car-num': tooltipData.count > 0 && usePermission('svmsapp:car-manage') }" @click="onClickCar">
        车辆总数：{{ tooltipData.count }}辆
      </text>
      <ve-subsection class="mb32" :list="tabs" mode="subsection" :current="current" activeColor="#165DFF" @change="onChange" />
    </view>
    <scroll-view scroll-y class="content">
      <view class="flex model" v-for="(item, index) in list" :key="index">
        <text class="model-text">
          <!-- <ve-tooltip>
            <template #content> {{ item.tmpName }} </template>
            <text class="text-over3">{{ item.tmpName }}</text>
          </ve-tooltip> -->
          {{ item.tmpName }}
        </text>
        <text class="car-num">{{ item.count }} 辆</text>
      </view>
      <ve-empty text="没有数据~" v-if="list.length == 0"></ve-empty>
    </scroll-view>
  </ve-popup>
</template>
<script setup>
  import { ref, watch } from 'vue'
  import charttips from '../components/charttips.vue'
  import { usePermission } from '@/hooks/usePermission'

  const props = defineProps({
    amount: {
      type: Array,
    },
    num: {
      type: Number,
      default: 0,
    },
    data: {
      type: Object,
    },
  })

  const list = ref([])

  const tabs = [
    {
      name: '车系维度统计',
    },
    {
      name: '车型维度统计',
    },
  ]
  const current = ref(0)
  const tooltipData = ref([])
  const toggleDetailStatus = ref(false)
  const dataAmount = ref([])
  const color = ref({
    0: '#1890FF',
    1: '#86DF6C',
    2: '#846BCE',
    3: '#B5C4C8',
  })
  watch(
    () => props.amount,
    (newVal) => {
      if (newVal) {
        dataAmount.value = newVal
      }
    },
    { immediate: true },
  )

  // 支持跳转的状态
  const statusList = [
    {
      value: 10,
      label: '租赁中',
    },
    {
      value: 20,
      label: '空闲可租',
    },
    {
      value: 30,
      label: '运维中',
    },
    {
      value: 60,
      label: '已借出',
    },
  ]

  const currentItem = ref({})

  const toList = (val, index) => {
    if (index > -1) {
      currentItem.value = val
      val.carSeriesInfoDto.forEach((item) => {
        item.tmpName = item.seriesName
      })
      tooltipData.value = { ...val, siteName: props.data.siteName }
      list.value = val.carSeriesInfoDto || []
      toggleDetailStatus.value = true
    }
  }

  const onChange = (index) => {
    if (index === 0) {
      currentItem.value.carSeriesInfoDto.forEach((item) => {
        item.tmpName = item.seriesName
      })
      list.value = currentItem.value.carSeriesInfoDto || []
    } else {
      currentItem.value.carModelInfoDto.forEach((item) => {
        item.tmpName = item.modelName
      })
      list.value = currentItem.value.carModelInfoDto || []
    }
  }

  const onClickCar = () => {
    if (tooltipData.value.count == 0 || !usePermission('svmsapp:car-manage')) return

    const v_item = statusList.find((it) => it.label == currentItem.value.name)
    if (!v_item) return
    const data = props.data
    const url = `/pages/asset/car-manager/list?operateStatus=${v_item.value}&siteId=${data.siteId}&siteName=${data.siteName}`
    uni.navigateTo({ url })
  }
</script>

<style lang="less" scoped>
  .group {
    width: 100%;
    height: 48rpx;
    background-image: url('../../static/images/group.png') !important;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeee;
  }
  .rate-step {
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 32rpx;
  }
  .ratetit {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #191c27;
    line-height: 28rpx;
    display: inline-block;
    margin: 16rpx 0;
  }

  .mb32 {
    margin: 10px 0 10px 0;
  }

  .flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .store-popup {
    /deep/ .ve-popup-content {
      height: 50vh;
      padding: 32rpx;
    }
    .popup-tlt {
      .site-label {
        font-size: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #191c27;

        .text-over {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .car-num {
        display: block;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #3072f6;
      }
    }
    .content {
      height: calc(100% - 134rpx);

      .model {
        padding: 32rpx 0;
        border-top: 1rpx solid rgba(216, 216, 216, 0.3);
        align-items: flex-start;
      }
      .model-text {
        width: 60%;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #191c27;
        line-height: 44rpx;
      }
      .text-over3 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .car-num {
        display: block;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #3072f6;
      }
    }
  }
</style>
